<template>
	<div class="logo-form">
		<div class="form-item account">
			<input class="ipt" type="text" v-model="form.account" placeholder="请输入账号" @change="verifyAccount = form.account ? false : true" />
			<span class="icon el-icon-user"></span>
			<p class="tips" v-show="verifyAccount">
				<span class="el-icon-warning-outline"></span>
				请输入账号
			</p>
		</div>
		<div class="form-item password">
			<input class="ipt" type="password" v-model="password" placeholder="请输入密码" @change="verifyPassword = password ? false : true" />
			<span class="icon el-icon-lock"></span>
			<p class="tips" v-show="verifyPassword">
				<span class="el-icon-warning-outline"></span>
				请输入密码
			</p>
		</div>
		<div class="form-item code" v-if="valiCode.flag">
			<input class="ipt" type="text" v-model="valiCode.codeInput" placeholder="请输入验证码" maxlength="4" />
			<span class="iconfont icon-yanzhengyanzhengma"></span>
			<img :src="valiCode.codeImg" @click="getCode()" alt="" />
		</div>
		<div class="other-btn">
			<!-- <span>忘记密码</span>
      <el-divider direction="vertical"></el-divider> -->
			<span @click="routeToByName('register')">
				<i class="el-icon-edit"></i>
				注册
			</span>
		</div>
		<div class="form-item submit">
			<button class="btn-submit" v-preventReClick @click="submit()">登　录</button>
		</div>
	</div>
</template>
<script>
import md5 from 'js-md5';
import { imageCode, login, tbSysUserAddUserInfo } from '@/api/http';
import { setSession } from '@/utils/session';
import { tbDeptQueryParentList } from '@/api/admin/system/unitManage.js';
export default {
	data() {
		return {
			verifyAccount: false,
			verifyPassword: false,
			form: {
				account: '',
				password: ''
			},
			password: '',
			valiCode: {
				flag: false,
				codeInput: '',
				code: '',
				codeImg: ''
			}
		};
	},
	mounted() {
		this.init();
		window.addEventListener('keydown', this.keyDown);
	},
	destroyed() {
		window.removeEventListener('keydown', this.keyDown, false);
	},
	methods: {
		async init() {
			let res = await this.$store.dispatch('getDictionaryVal', 'VAILCODE');
			this.valiCode.flag = res[0] == 1;
			this.valiCode.flag ? this.getCode() : '';
		},
		getCode() {
			this.valiCode.codeInput = '';
			imageCode().then((res) => {
				let { code, base64String } = res.data.data[0];
				this.valiCode.code = code;
				this.valiCode.codeImg = base64String;
			});
		},
		submit() {
			if (this.valiCode.flag && this.valiCode.codeInput.toUpperCase() != this.valiCode.code.toUpperCase()) {
				this.$message.error('验证码错误或者为空');
				this.codeInput = '';
				this.getCode();
				return;
			}
			this.verifyAccount = this.form.account ? false : true;
			this.verifyPassword = this.password ? false : true;
			if (!this.verifyAccount && !this.verifyPassword) {
				this.handleLogin();
			}
		},
		handleLogin() {
			this.form.password = md5(this.password + this.md5Key).toUpperCase();
			login(this.form).then((res) => {
				if (res && res.data && res.data.code == 0) {
					setSession('authorization', res.headers.authorization);
					let data = res.data.data[0];
					this.$set(data, 'userName', data.username);
					this.$store.commit('SETUSERINFO', data);
					this.getDeptParentList(data);
					this.loginEnd(data.id);
					this.$store.dispatch('getTbMenuQueryData');
					setTimeout(() => {
						let query = {};
						let courseId = this.$route.query.courseId;
						let redirect = this.$route.query.redirect;
						let toPath = redirect && redirect != 'null' ? redirect : 'index';
						if (!!courseId) {
							query['courseId'] = courseId;
						}
						this.$router.replace({ name: toPath, query });
					}, 200);
				}
			});
		},
		//获取部门详情
		getDeptParentList(data) {
			if (!data.deptId) return;
			tbDeptQueryParentList(data.deptId).then((res) => {
				let deptFullData = res.data.data[0];
				this.$set(data, 'deptFullData', deptFullData);
				this.$store.commit('SETUSERINFO', data);
			});
		},
		keyDown(e) {
			if (e.keyCode == 13) {
				this.submit();
			}
		},
		loginEnd(id) {
			tbSysUserAddUserInfo(id).then((res) => {});
		}
	}
};
</script>
<style lang="scss">
.logo-form {
	.form-item {
		position: relative;
		span.icon {
			position: absolute;
			top: 30px;
			left: 28px;
			font-size: 32px;
			color: var(--colorH2);
		}
		.tips {
			position: absolute;
			bottom: -5px;
			left: 75px;
			color: #fff;
			font-size: 14px;
		}
	}
	.ipt {
		width: 100%;
		height: 54px;
		line-height: 54px;
		border-radius: 54px;
		border: 1px solid var(--colorH1);
		outline: none;
		margin: 20px 0;
		text-indent: 75px;
		font-size: 14px;
		color: #333;
	}
	.btn-submit {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: var(--colorH1);
		color: #fff;
		font-size: 26px;
		border-radius: 60px;
		outline: none;
		border: 0 none;
		cursor: pointer;
		// background: url("../../assets/login/bg03.png") repeat-x;
		&:hover {
			// background-image: url('../../assets/login/bg04.png');
			background: var(--colorH2);
		}
	}
	.code {
		position: relative;
		img {
			position: absolute;
			right: 0;
			top: 21px;
			height: 54px;
			cursor: pointer;
			border-radius: 0 30px 30px 0;
		}
		.iconfont {
			position: absolute;
			left: 24px;
			top: 28px;
			padding: 4px;
			font-size: 30px;
			color: var(--colorH2);
			font-weight: bold;
		}
	}
	.other-btn {
		text-align: right;
		color: #000;
		margin-bottom: 30px;
		padding: 0 20px;
		span {
			cursor: pointer;
			color: var(--colorH1);
			font-weight: 500;
			&:hover {
				border-bottom: 1px solid #fff;
			}
		}
	}
}
</style>
